<template>
    <div style="padding: 20px;">
        <div :class="settings.customMessage.stat == 1?'open':''" class="setting-tab">
            <div @click="settings.customMessage.stat = 1-settings.customMessage.stat&1">
                <span style="font-weight: bold;">自定义消息</span>
                <span v-if="settings.customMessage.stat == 0" style="font-size: 12px;margin-left: 8px;">未启用</span>
            </div>
            <div v-if="settings.customMessage.stat == 1"
                 class="setting-item">
                <input placeholder="请输入一个地址，如：//192.168.1.2/custom.php" v-model="settings.customMessage.config" style="outline: none;border: none;width: 100%;">
            </div>
        </div>
    </div>
    <!--邮件设置-->
    <!--微信设置-->
    <!--自定义统计设置-->
    <!--会话超时-->
</template>
<script>

    export default{
        data(){
            return {
                settings: {
                    customMessage: {
                        stat: 0,
                        config: ""
                    },

                }
            }
        },
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        methods: {

        },
        mounted: function () {
            const that = this;
            $.post('setting/advance/find',{key:'CUSTOM_MESSAGE'},function(result){
                if(result && result.value){
                    let value = result.value;
                    value = JSON.parse(value);
                    that.settings.customMessage = value;
                }
            });
        },
        watch:{
            'settings.customMessage':{
                handler:function(customMessage){
                    let request = {stat:customMessage.stat};
                    request['key'] = 'CUSTOM_MESSAGE';
                    request.config = customMessage.config;
                    request['value'] = JSON.stringify(request);
                    $.post('/setting/advance/update',request,function (result) {

                    });
                },
                deep:true
            }
        }
    }

</script>

<style scoped>
    .setting-tab:first-child {
        margin-top: 0;
    }
    .setting-tab.open {
        color:rgb(247, 247, 247);
        background: #41a1b7;
        border: 1px solid #41a1b7;
    }
    .setting-tab {
        width:100%;
        max-width: 800px;
        cursor: pointer;
        margin-top: 16px;
        border-radius: 4px;
        padding: 12px;
        border: 1px solid #d8d8d8;
        background:rgb(247, 247, 247);
        color: #a4a4a4;
    }
    .setting-tab label {
        margin:0;
    }
    .setting-item{
        background-color: white;padding: 12px;margin-top: 16px;color: #555;
        border-radius: 4px;
    }
</style>